<template>
  <div>
    <div class="searchForm">
      <el-form :inline="true"
               :model="formData"
               class="demo-form-inline">
        <el-form-item label="服务类型">
          <el-select v-model="formData.kind"
                     style="width: 100px"
                     placeholder="请选择">
            <el-option label="所有" value=""></el-option>
            <el-option v-for="item in serviceKind"
                       :label="item.name"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
              <el-date-picker type="date"
                              placeholder="选择日期"
                              style="width: 150px"
                              value-format="yyyy-MM-dd"
                              v-model="formData.timeBeginRange"
                            ></el-date-picker>
          <span style="margin: 0 5px;color: #f0f0f0">-</span>
              <el-date-picker type="date"
                              placeholder="选择日期"
                              style="width: 150px"
                              value-format="yyyy-MM-dd"
                              v-model="formData.timeEndRange"
                              ></el-date-picker>
        </el-form-item>
        <el-form-item label="金额">
            <el-input type="age"
                      style="width: 100px"
                      placeholder="请输入"
                      v-model.number="formData.moneyBeginRange"></el-input>
          <span style="margin: 0 5px;color: #f0f0f0">-</span>
            <el-input type="age"
                      style="width: 100px"
                      placeholder="请输入"
                      v-model.number="formData.moneyEndRange"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="formData.productName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
      <el-table-column
              fixed
              prop="or_id"
              label="订单ID"
              width="100">
      </el-table-column>
      <el-table-column
              prop="ber_id"
              label="用户ID"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_kind"
              label="服务类型"
              width="120">
        <template slot-scope="scope">
          <div v-html="format(scope.row.or_kind,0)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_type"
              label="订单状态"
              width="120">
        <template slot-scope="scope">
          <div v-html="format(scope.row.or_type,1)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_accept"
              label="平台受理状态"
              width="120">
        <template slot-scope="scope">
          <div v-html="format(scope.row.or_accept,2)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_process"
              label="下一步流程"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_time"
              label="下单时间"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_product"
              label="产品名称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_money"
              label="金额(元)"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_pay"
              label="是否付款"
              width="120">
        <template slot-scope="scope">
          <div v-html="format(scope.row.or_pay,3)"></div>
        </template>
      </el-table-column>
      <el-table-column
              fixed="right"
              label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="grapOrder(scope.row.or_id)"
                     size="medium">抢单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
  import axios from "axios";
  import {dictionary} from "../../../utils/allDictionary";
  import mixin from "../../../mixin/server";


  export default {
    name: "OrderCenter",
    inject:['reload'],
    mixins:[mixin],
    mounted() {
      let url = 'https://haotry.top/api/serviceSide/getOrdersWithCondition'
      axios.post(url,JSON.stringify(this.formData),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        let data = res.data
        console.log(data)
        if(data.status === 200){
          this.tableData = data.data
        }
        else{
        }
      })
    },
    data(){
      return{
        tableData:[],
        currentPage4: 1,
        formData:{
          kind:'',
          timeBeginRange:'',
          timeEndRange:'',
          productName:'',
          moneyBeginRange:'',
          moneyEndRange:'',
          pay:''
        },
        serviceKind : dictionary.serviceKind
      }
    },
    methods:{
      //抢单
      grapOrder(or_id) {
        this.$confirm('确定抢单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = 'https://haotry.top/api/serviceSide/takeOrders'
          axios.post(url, JSON.stringify({ser_id: '1', or_id}), {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            let data = res.data
            console.log(data)
            if (data.status === 200) {
              this.$message({
                type: 'success',
                message: '抢单成功!'
              });
              this.reload()
            } else {
              this.$message({
                type: 'info',
                message: '抢单失败!'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        })
      },

      onSubmit(){
        console.log(this.formData)
        let url = 'https://haotry.top/api/serviceSide/getOrdersWithCondition'
        axios.post(url,JSON.stringify(this.formData),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          console.log(data)
          if(data.status === 200){
            this.tableData = data.data
          }
          else{
          }
        })
      }
    }
  }
</script>

<style scoped>
  .searchForm{
    width: 100%;
    /*height: 40px;*/
    background-color: #0f4984;
   padding-top: 20px;
    text-align: left;
  }
  .el-form-item{
    margin-left: 15px;
  }
  /deep/.el-form-item__label{
    color: #f5f2f2;
  }
</style>